<template>
  <div class="main">
    <!-- 顶部导航 -->
    <van-search v-model="value" fixed placeholder="请输入产品信息" />
    <div class="conent">
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe
          class="my-swipe"
          :show-indicators="false"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            v-for="(item, index) in FinsBanner"
            :key="index"
            @click="goProduce"
          >
            <img :src="item.url" />
          </van-swipe-item>
        </van-swipe>

        <!-- 轮播图下方文字 -->
        <!-- <div class="bannerText">
        <div class="btitem"><span></span>官方质保</div>
        <div class="btitem"><span></span>官方质保</div>
        <div class="btitem"><span></span>七天无理由退换</div>
        <div class="btitem"><span></span>官方质保</div>
      </div> -->
        <div class="bannerText">
          <div class="btitem">
            <span></span>消息通知，XXX刚刚购买了XXX私密产品名字名字
          </div>
        </div>
      </div>
      <!-- 视频 长列表 -->
      <div class="slideVideo">
        <div class="title">热销产品</div>
        <div class="slide">
          <!--  @click="goVideo" 热销产品获取展示渲染-->
          <!-- <div class="slide-item" v-for="item in 4" :key="item.id"> -->
          <div class="slide-item" v-for="item in HotGoods" :key="item.id">
            <div class="video-item" @click="goProduce(item.id)">
              <div class="video-top">
                <img :src="item.goodsShow[0].url" />
                <!-- <div class="playcount"><span></span>112225次</div> -->
              </div>
              <div class="text">
                <div class="titel ele">{{ item.goods_name }}</div>
                <!-- <div class="info">343人已购买</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 标签页类目 -->
      <!-- <van-tabs v-model="active" @change="onChange"> -->
      <van-tabs v-model="active">
        <!-- 获取后台的商品分类 -->
        <van-tab
          title-active-color="#1F0D44"
          title-inactive-color="#AFABB7"
          v-for="item in goodsType"
          :key="item.id"
          :title="item.type_name"
        >
          <!-- 内容 {{ index }} -->
          <indexList ref="goodsType" :typeId="item.id"></indexList>
        </van-tab>
      </van-tabs>
    </div>
    <vanTabber></vanTabber>
  </div>
</template>

<script>
import indexList from './indexList'
import { mapState } from 'vuex'
import { getGoodsType, getHotGoods, getFinsBanner } from '@/api/index.js'
export default {
  name: 'index',
  components: { indexList },
  data() {
    return {
      value: '',
      active: 0,
      goodsType: [], //商品分类
      HotGoods: [], //热销产品
      FinsBanner: [] //轮播图
    }
  },
  created() {
    this.getGoodsType() // 获取商品分类
    this.getHotGoods() //获取热销产品
    this.getFinsBanner() //获取顶部轮播图
  },
  methods: {
    goProduce(id) {
      // 跳转视频页
      this.$router.push({ name: 'product', query: { id } })
    },
    // goProduce() {
    //   this.$router.push('/product/1') // 跳转视频页
    // },
    goVideo() {
      this.$router.push('/video/1') // 从轮播图到产品页
    },
    async getGoodsType() {
      // 获取商品分类   展示目录    根据目录显示对应目录下的商品
      this.$toast('获取商品分类')
      try {
        const res = await getGoodsType()
        // console.log(res)
        this.goodsType = res.data
      } catch (error) {
        console.dir(error)
      }
    },
    async getFinsBanner() {
      try {
        const res = await getFinsBanner()
        this.FinsBanner = res.data
        // 轮播图数据
        // console.log(this.FinsBanner)
      } catch (error) {
        console.log(error)
      }
    },
    async getHotGoods() {
      // 获取热销产品
      try {
        const res = await getHotGoods()
        this.HotGoods = res.data
        // console.log(res.data)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  // 搜素框
  padding-bottom: 32px;
  .van-search {
    z-index: 9;
    position: fixed;
    top: 0;
    background-color: #fff;
    .van-search__content {
      width: 351px;
      height: 32px;
      background: #f7f6fb;
      border-radius: 17px;
    }
  }
  .conent {
    // 除搜索框以外的
    padding-top: 52px;
    .banner {
      padding: 0px 16px 0 16px;
      .my-swipe {
        width: 343px;
        height: 140px;
        border-radius: 8px;
        .van-swipe-item {
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .bannerText {
        padding-top: 6px; //顶部banner距离
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        color: #afabb7;
        span {
          width: 16px;
          height: 16px;
          background: url('~@/assets/font/indexTrumpet.png') 16px 16px / cover;
          display: inline-block;
          vertical-align: bottom;
          margin-right: 4px;
          position: relative;
          top: -1px;
        }
      }
    }
    .slideVideo {
      padding: 16px;
      padding-right: 0;
      .title {
        width: 64px;
        height: 26px;
        font-size: 16px;
        font-weight: bold;
        color: #1f0d44;
        line-height: 26px;
        margin-bottom: 12px;
      }
      .slide {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        padding-bottom: 10px;
        .slide::-webkit-scrollbar {
          display: none; //隐藏滚动条
        }
        .slide-item {
          width: 160px;
          height: 190px;
          margin-right: 12px;
          display: inline-block;
          //   background: #ffffff;
          background-color: #fff;
          white-space: nowrap;
          box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
          border-radius: 6px;
          .video-top {
            width: 160px;
            height: 123px;
            border-radius: 6px 6px 0px 0px;
            background-color: #ff3040;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .playcount {
              position: absolute;
              bottom: 5px;
              left: 10px;
              font-size: 12px;
              font-weight: 400;
              color: #ffffff;
              span {
                margin-right: 4px;
                display: inline-block;
                width: 14px;
                height: 14px;
                vertical-align: middle;
                // background: #d8d8d8;
                vertical-align: bottom;
                background: url('~@/assets/font/eye.png') 14px 14px / cover;
              }
            }
          }
          .text {
            font-family: PingFangSC-Semibold, PingFang SC;
          }
          .titel {
            margin: 10px;
            width: 140px;
            height: 20px;
            font-size: 14px;
            font-weight: 600;
            color: #333333;
            line-height: 20px;
          }
          .info {
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
          }
        }
      }
    }
    // 标签页边框
    ::v-deep {
      .van-tabs--line .van-tabs__wrap {
        height: 48px;
      }
      .van-tab__text {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        height: 24px;
      }
      .van-tabs__line {
        width: 14px;
        height: 2px;
        background: linear-gradient(315deg, #622ccc 0%, #b620e0 100%);
        border-radius: 1px;
        bottom: 22px; //相对于整个标签栏
      }
    }
  }
}
</style>
